<template>
  <div class="cart-box">
    <div class="btn" v-show="food.num > 0" @click="decNum">
      <img src="../../../static/imgs/dec_num.png" width="100%" height="100%">
    </div>
    <div class="num" v-show="food.num > 0">{{food.num}}</div>
    <div class="btn">
      <img src="../../../static/imgs/add_num.png" width="100%" height="100%" @click="addNum($event)">
    </div>
  </div>
</template>

<script>
  import {mapState, mapMutations} from 'vuex'
  export default {
    name: 'MenuControl',

    data() {
      return {}
    },

    props: {
      food: {
        type: Object
      }
    },

    components: {},

    mounted() {
      let lan = localStorage.getItem("lan");
      if(lan){
        this.$i18n.locale = lan
      }
      this.$nextTick(() => {
      })
    },

    watch: {},

    computed: {
      ...mapState([
        'cartFoods'
      ])
    },

    filters: {},

    methods: {
      ...mapMutations([
        'ADD_CART',
        'DEC_CART'
      ]),
      addNum({target}) {
        this.$emit('add', target)
        if (this.food.specials) {
          this.ADD_CART({food: JSON.parse(JSON.stringify(this.food)), options: this.food.specials})
        } else {
          this.ADD_CART({food: JSON.parse(JSON.stringify(this.food))})
        }
      },
      decNum() {
        this.DEC_CART(this.food)
      }
    }
  }
</script>

<style scoped lang="scss">
  @import "../../../static/css/mixin";

  .cart-box {
    @include fja();
    .btn {
      width: .64rem;
      height: .64rem;
      & .add-cart {
        background: url("../../../static/imgs/add_active.png");
        width: 1.2rem;
        height: .8rem;
      }
    }
    .num {
      padding: 0 .36rem;
      @include fscfw(.4rem)
    }
  }
</style>
